<template>
  <div>
    <div style="margin-bottom: 16px">
      <a-row type="flex" :gutter="10">
        <a-col :span="4">
          <a-input placeholder="流程定义ID" />
        </a-col>
        <a-col :span="4">
          <a-input placeholder="流程定义名称" />
        </a-col>
        <a-col :span="4">
          <a-input placeholder="流程定义KEY" />
        </a-col>
        <a-col :span="4">
          <a-cascader style="width: 100%" :options="processeditStatus" placeholder="状态" />
        </a-col>
        <a-col :span="6">
          <a-button-group>
            <a-button type="primary">
              <a-icon type="search" />查询
            </a-button>
            <a-button type="primary">重置</a-button>
          </a-button-group>
          <a-button-group class="button-processedit">
            <a-button type="primary" icon="plus" @click="() => setModalVisible(true)">导入</a-button>
          </a-button-group>
        </a-col>
        <a-modal v-model="modalVisible" title="流程定义导入" centered @ok="() => (modalVisible = false)">
          <ProcessImport />
        </a-modal>
        <!-- <a-col :span="6">
          <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">Reload</a-button>
          <span style="margin-left: 8px">
            <template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template>
          </span>
        </a-col>-->
      </a-row>
    </div>
    <a-table :columns="columns" :data-source="data">
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="tags" slot-scope="tags">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
        >{{ tag.toUpperCase() }}</a-tag>
      </span>
      <span slot="action" slot-scope="action">
        <a-dropdown>
          <a class="ant-dropdown-link" @click="e => e.preventDefault()">
            操作
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item key="0">
              <a @click="a(action)">
                <a-icon type="eye" class="dropdown-cion" />流程图
              </a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="1">
              <a>
                <a-icon type="form" class="dropdown-cion" />流程授权
              </a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3">
              <a-icon type="export" class="dropdown-cion" />导出
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="4">
              <a-icon type="stop" class="dropdown-cion" />挂起
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="5">
              <a-icon type="delete" class="dropdown-cion" />删除
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="6">
              <a-icon type="delete" class="dropdown-cion" />删除包含实例
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="6">
              <a-icon type="form" class="dropdown-cion" />实例列表
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </a-table>
  </div>
</template>

<script>
import ProcessImport from "./ProcessImport.vue";
const processeditStatus = [
  {
    value: "down",
    label: "挂起"
  },
  {
    value: "up",
    label: "激活"
  }
];
const columns = [
  {
    title: "流程定义名称",
    dataIndex: "name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "流程定义KEY",
    dataIndex: "processkey"
  },
  {
    title: "流程定义分类",
    dataIndex: "processtype"
  },
  {
    title: "版本",
    dataIndex: "processedition"
  },
  {
    title: "状态",
    dataIndex: "processestatus"
  },
  {
    title: "表单KEY",
    dataIndex: "tabkey"
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    processkey: `London, Park Lane no. ${i}`,
    processtype: `分类${i}`,
    processedition: `版本${i}`,
    processestatus: "激活",
    tabkey: `leaveApply.form${i}`
  });
}

export default {
  components: { ProcessImport },
  data() {
    return {
      processeditStatus,
      data,
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      modalVisible: false
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    setModalVisible(modalVisible) {
      this.modalVisible = modalVisible;
    },
    a(data) {
      console.log(data);
      alert(data.name);
    }
  }
};
</script>


<style lang="scss" scoped>
.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}
.button-processedit {
  margin-left: 10px;
}
.dropdown-cion {
  margin-right: 10px;
}
</style>